<template>
  <div class="dashboard-editor-container">

    <panel-group />

    <el-radio-group v-model="dateType.msg" size="mini" v-on:change="fetchMsgChart()">
      <el-radio-button label="week">最近一周</el-radio-button>
      <el-radio-button label="month">最近一月</el-radio-button>
      <el-radio-button label="year">最近一年</el-radio-button>
    </el-radio-group>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="msgChartData"/>
    </el-row>

    <el-radio-group v-model="dateType.channel" size="mini" v-on:change="fetchChannelChart()">
      <el-radio-button label="week">最近一周</el-radio-button>
      <el-radio-button label="month">最近一月</el-radio-button>
      <el-radio-button label="year">最近一年</el-radio-button>
    </el-radio-group>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="channelChartData"/>
    </el-row>

    <el-radio-group v-model="dateType.group" size="mini" v-on:change="fetchGroupChart()">
      <el-radio-button label="week">最近一周</el-radio-button>
      <el-radio-button label="month">最近一月</el-radio-button>
      <el-radio-button label="year">最近一年</el-radio-button>
    </el-radio-group>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="groupChartData"/>
    </el-row>

    <el-radio-group v-model="dateType.resource" size="mini" v-on:change="fetchResourceChart()">
      <el-radio-button label="week">最近一周</el-radio-button>
      <el-radio-button label="month">最近一月</el-radio-button>
      <el-radio-button label="year">最近一年</el-radio-button>
    </el-radio-group>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="resourceChartData"/>
    </el-row>
  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import {getChart} from '@/api/table'

  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      LineChart
    },
    data() {
      return {
        channelChartData: {
          name: '频道采集数量',
          count:[],
          time:[]
        },
        resourceChartData: {
          name: '资源采集趋数量',
          count:[],
          time:[]
        },
        msgChartData: {
          name: '消息采集数量',
          count:[],
          time:[]
        },
        groupChartData: {
          name: '群组采集数量',
          count:[],
          time:[]
        },
        dateType: {
          channel: 'month',
          resource: 'month',
          msg: 'month',
          group: 'month'
        }
      }
    },
    created() {
       // this.initChart()
    },
    methods: {
      initChart(){
        this.fetchMsgChart()
        this.fetchChannelChart()
        this.fetchGroupChart()
        this.fetchResourceChart()
      },
      fetchMsgChart(){
        //消息发现趋势初始化
        getChart({chartType:'msg',dateType:this.dateType.msg}).then(response => {
          if (response.code === 200){
            let data =  JSON.parse(response.data);
            //直接赋值会导致msgChartData的地址不变 不触发linechart的watch函数
            if (!data.hasOwnProperty("chartCount") || !data.hasOwnProperty("chartTime")){
              return
            }
            this.msgChartData ={
              count: JSON.parse(data.chartCount),
              time : JSON.parse(data.chartTime),
              name : "消息采集数量"
            }
          }
        })
      },
      fetchChannelChart(){
        //频道发现趋势初始化
        getChart({chartType:'channel',dateType:this.dateType.channel}).then(response => {
          if (response.code === 200){
            let data =  JSON.parse(response.data);
            if (!data.hasOwnProperty("chartCount") || !data.hasOwnProperty("chartTime")){
              return
            }
            this.channelChartData ={
              count: JSON.parse(data.chartCount),
              time : JSON.parse(data.chartTime),
              name : "频道采集数量"
            }
          }
        })
      },
      fetchGroupChart(){
        //群组发现趋势初始化
        getChart({chartType:'group',dateType:this.dateType.group}).then(response => {
          if (response.code === 200){
            let data =  JSON.parse(response.data);
            if (!data.hasOwnProperty("chartCount") || !data.hasOwnProperty("chartTime")){
              return
            }
            this.groupChartData ={
              count: JSON.parse(data.chartCount),
              time : JSON.parse(data.chartTime),
              name : "群组采集数量"
            }
          }
        })
      },
      fetchResourceChart(){
        //资源发现趋势初始化
        getChart({chartType:'resource',dateType:this.dateType.resource}).then(response => {
          if (response.code === 200){
            let data =  JSON.parse(response.data);
            if (!data.hasOwnProperty("chartCount") || !data.hasOwnProperty("chartTime")){
              return
            }
            this.resourceChartData ={
              count: JSON.parse(data.chartCount),
              time : JSON.parse(data.chartTime),
              name : "资源采集数量"
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
